import React, {PureComponent} from 'react';
import {Form, Input, Modal, Select} from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 6},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 12},
    md: {span: 15},
  },
};

@Form.create()
export default class MenuModal extends PureComponent {

  handleOk = () => {
    const {form, handleSave} = this.props;
    form.validateFieldsAndScroll((errors, values) => {
      if (errors) {
        return
      }
      handleSave(values, form);
    })
  }

  render() {
    const {form: {getFieldDecorator}, items, title, modalVisible, handleModalCancel} = this.props;

    return (
      <div>
        <Modal
          title={title}
          visible={modalVisible}
          onOk={this.handleOk}
          onCancel={handleModalCancel}
        >
          <Form>
            {getFieldDecorator('id', {
              initialValue: items.id,
            })(
              <Input hidden={true}/>
            )}
            <FormItem
              {...formItemLayout}
              label="名称"
            >
              {getFieldDecorator('name', {
                initialValue: items.name,
                rules: [{
                  required: true, message: '请输入名称',
                }],
              })(
                <Input placeholder="请输入名称"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="编号"
            >
              {getFieldDecorator('code', {
                initialValue: items.code,
                rules: [{
                  required: true, message: '请输入编号',
                }],
              })(
                <Input placeholder="请输入编号"/>
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="类型"
            >
              {getFieldDecorator('type', {
                initialValue: items.type,
                rules: [{
                  required: true, message: '请选择角色类型',
                }],
              })(
                <Select placeholder="请选择角色类型">
                  <Select.Option key={'SYSTEM_ROLE'} value={'SYSTEM_ROLE'}>系统角色</Select.Option>
                  <Select.Option key={'MASTER_ROLE'} value={'MASTER_ROLE'}>主帐户角色</Select.Option>
                  <Select.Option key={'SUB_ROLE'} value={'SUB_ROLE'}>子帐户角色</Select.Option>
                </Select>
              )}
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}
